<template>

  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>投诉统计分析</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <h1 style="font-size: 50px">报表图-投诉</h1>

    <div ref="myChart" id="myChart" style="width: 100%;height: 700px">


    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {

      Arr1: [],
      Arr2: [],
    }
  },
  created: function () {
    this.axios.get("http://localhost:8080/report/for/repair/compliant").then((response) => {
      this.Arr1 = response.data.data;
      let myEcharts = echarts.init(this.$refs.myChart)
      let xData = this.Arr1
      let data = this.Arr2

     let option = {
        xAxis: {
          type: 'category',
          data:xData,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };


      myEcharts.setOption(option)
    })
    this.axios.get("http://localhost:8080/report/for/repair/compliant/data").then((response) => {
      this.Arr2 = response.data.data;
      let myEcharts = echarts.init(this.$refs.myChart)
      let xData = this.Arr1
      let data = this.Arr2
      let option = {
        xAxis: {
          type: 'category',
          xData,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      myEcharts.setOption(option)
    })


  },
  // mounted() {
  //   let myEcharts = echarts.init(this.$refs.myChart)
  //   let xData = this.Arr1
  //   let data = this.Arr2
  //   let option = {
  //     xAxis: {
  //       type: "category",
  //       data: xData
  //     },
  //     yAxis: {
  //       type: "value"
  //     },
  //     series: [
  //       {
  //         data,
  //         type: "line",
  //         areaStyle: {},
  //         smooth: true
  //       }
  //     ]
  //   };
  //   myEcharts.setOption(option)
  // },


}
</script>


<style scoped>
#myChart {

}
</style>